<template>
	<!-- 我的-邀请 -->
	<view class="invite">
		<!-- 活动规则 -->
		<view class="rule">
			<view class="rule-main flexjcc" @click="JumpActivityRules">
				活动规则
			</view>
		</view>
		<!-- 邀请有礼 -->
		<view class="main-header">
			<view class="main-header-image">
				<image src="../../static/my/InviteMembers/font.png" mode=""></image>
				<view class="">
					邀请好友领新人奖励，多邀多得哟
				</view>
			</view>
			<view class="main-header-titlePeople">
				<image src="../../static/my/InviteMembers/nameImage.png" mode=""></image>
			</view>
		</view>
		<!--  -->
		<view class="main">
			<!-- 空 -->
			<view class="empty"></view>
			<!-- 邀请码 -->
			<view class="centent">
				<!-- <view class="InvitationCode">
					邀请码：<text>dhr33</text>
				</view> -->
				<view class="QRCode">
					<!-- <image
						src=""
						mode=""></image> -->
					<image :src="'https://songcan.xyct1688.com/' + sharing" mode=""></image>
				</view>
				<view class="download" @click="downloadImage">
					下载图片
				</view>
			</view>
			<!-- 邀请记录 -->
			<view class="InvitationRecord">
				<view class="InvitationRecord-main">
					<view class="InvitationRecord-title flexjcc">
						<view class="InvitationRecord-title-main flexjcc">邀请记录</view>
					</view>
					<view class="InvitationRecord-main-item">
						<view class="content-item flexjcsb" v-for="item in arr" :key="item.id">
							<view class="content-item-left">
								<view class="content-item-left-image">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="content-item-left-main">
									<view class="">
										{{ item.nickname }}
									</view>
									<view class="">
										{{ item.reg_time | formatTime }}
									</view>
								</view>
							</view>
							<view class="content-item-right">
								积分<text>+{{ item.integral }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			sharing: '',
			arr: []
		}
	},
	onLoad(query) {
		console.log(query);
		this.sharingCode()
		this.invitationRecord()
	},
	methods: {
		sharingCode() {
			let qrcode_param = {
				// "id": "16",
				// "ptType": "jiaru"
			}
			$api.postSharingCode({
				qrcode_param: JSON.stringify(qrcode_param),
				page: '/pages_login/login/login',
				type: 'pincan',
			}).then(res => {
				this.sharing = res.data.data.path
			})
		},
		// 邀请记录
		invitationRecord() {
			$api.postInvitationRecord({}).then(res => {
				this.arr = res.data.data.list
			})
		},
		// 下载图片
		downloadImage() {
			uni.downloadFile({
				url: 'https://songcan.xyct1688.com/' + this.sharing,
				success: (res) => {
					if (res.statusCode === 200) {
						// 下载成功后，可以通过res.tempFilePath获取到下载后的图片路径
						console.log(res.tempFilePath);

						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								})
							}
						})
					} else {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						})
					}
				},
				fail: (err) => {
					uni.showToast({
						title: '请允许小程序将图片下载到相册',
						icon: 'none'
					})
				}
			})
		},
		// 跳转活动规则
		JumpActivityRules() {
			uni.navigateTo({
				url: '../../pages_InviteMembers/InviteMembers/ActivityRules'
			})
		}
	}
}
</script>

<style lang="less" scoped>
.invite {
	width: 100vw;
	min-height: 100vh;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	background-color: #F14500;
	// overflow-y: scroll;

	// 活动规则
	.rule {
		display: flex;
		justify-content: flex-end;

		.rule-main {
			width: 184rpx;
			height: 56rpx;
			// background: #0F0F0F;
			// opacity: 0.57;
			background: rgba(0, 0, 0, 0.57);
			border-radius: 28rpx 0rpx 0rpx 28rpx;
			color: white;
			margin-top: 39rpx;
			z-index: 1;
		}
	}

	// 邀请有礼
	.main-header {
		position: relative;
		width: 100%;
		height: 287rpx;

		// background: aqua;
		.main-header-image {
			text-align: center;
			color: white;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			image {
				width: 396rpx;
				height: 88rpx;
			}
		}

		.main-header-titlePeople {
			image {
				position: absolute;
				width: 100%;
				height: 900rpx;
				top: -150rpx;
				left: 70rpx;
				// z-index: -1;
			}
		}
	}

	.main {
		position: relative;
		width: 693rpx;
		height: 1106rpx;
		background: #FFA480;
		border-radius: 30rpx;
		margin: auto;

		// 空
		.empty {
			height: 33rpx;
		}

		.centent {
			width: 628rpx;
			height: 626rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: auto;
			padding-top: 61rpx;

			// 邀请码
			// .InvitationCode(){
			// 	// padding: 61rpx 0 45rpx 0;
			// }
			// 二维码
			.QRCode {
				margin-top: 45rpx;

				image {
					width: 346rpx;
					height: 346rpx;
				}
			}

			// 下载图片
			.download {
				font-size: 30rpx;
				color: #F14500;
				padding-top: 40rpx;
			}
		}

		// 邀请记录
		.InvitationRecord {
			width: 628rpx;
			height: 326rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: auto;
			margin-top: 55rpx;

			.InvitationRecord-main {
				position: relative;

				.InvitationRecord-title {
					.InvitationRecord-title-main {
						position: absolute;
						width: 260rpx;
						height: 60rpx;
						top: -30rpx;
						left: 184rpx;
						color: white;
						background: #F14500;
						border-radius: 30rpx;
					}
				}

				.InvitationRecord-main-item {
					// padding-top: 86rpx;
					height: 326rpx;
					padding-top: 56rpx;
					// background: pink;
					overflow-y: scroll;

					// 每一条数据
					.content-item {
						width: 562.5rpx;
						height: 130rpx;
						margin: auto;
						// padding-top: 86rpx;
						border-bottom: 1px solid #F1F1F1;

						.content-item-left {
							display: flex;
							align-items: center;

							.content-item-left-image {
								image {
									width: 77rpx;
									height: 77rpx;
									border-radius: 50%;
									margin-right: 18rpx;
								}
							}

							.content-item-left-main {
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #323232;

								view:last-child {
									font-size: 18rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #7D7D7D;
									// padding-top: 22rpx;
									padding-top: 15rpx;
								}
							}
						}

						.content-item-right {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #777777;

							text {
								color: #B93434;
							}
						}
					}

					.content-item:last-child {
						border: none;
					}
				}
			}
		}
	}
}
</style>